<template>
    <div class="new-a-box">
        <div class="base bg-white">
            <div class="w-full m-8">
                <div class="album-b-t">
                    <p class="font-medium text-2xl">新碟上架</p>
                </div>
                <div class="grid grid-cols-6 mt-4">
                    <div
                        @click="getRouterToAlbumList(item.id)" v-for="(item, index) in hotAlbumsArr" :key="index">
                        <n-image
                            width="150"
                            :src="item.picUrl"
                            object-fit="cover"
                            :style="{ border: '1px solid #999999', boxShadow: '0 5px 50px #999999'}"
                        />
                        <p class="hover:underline cursor-pointer" :title="item.name">{{ calString(item.name, 10) }}</p>
                        <p :title="item.artist.name" :style="{color: '#999999'}">
                            {{ calString(item.artist.name, 10) }}</p>
                    </div>
                </div>
                <div class="album-b-t mt-8">
                    <p class="font-medium text-2xl">全部新碟</p>
                    <div class="grid grid-cols-5 divide-x divide-gray-300 top-bar-tag">
                        <!--            因为a标签默认样式已经被取消，所以需要自己模拟a标签效果-->
                        <p v-for="(value, key, index) in allAlbumsTag" :key="index"
                           class="cursor-pointer hover:underline px-4 flex items-center"
                           @click="refreshNewAlbumsData(value, 0, 1)">
                            {{ key }}
                        </p>
                    </div>
                </div>
                
                <div class="grid grid-cols-6 mt-4">
                    <div
                        @click="getRouterToAlbumList(item.id)" v-for="(item, index) in newAlbumsArr" :key="index">
                        <n-image
                            width="150"
                            :src="item.picUrl"
                            object-fit="cover"
                            :style="{ border: '1px solid #999999', boxShadow: '0 5px 50px #999999'}"
                        />
                        <p class="hover:underline cursor-pointer" :title="item.name">{{ calString(item.name, 10) }}</p>
                        <p :title="item.artist.name" :style="{color: '#999999'}">
                            {{ calString(item.artist.name, 10) }}</p>
                    </div>
                </div>
    
                <div class="flex items-center justify-center mt-4">
                    <n-pagination v-model:page="page" :page-count="pageCount" show-quick-jumper :on-update:page="OnPageUpdate"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {NImage, useNotification, NPagination} from 'naive-ui';
import {onBeforeMount, reactive, toRefs} from "vue";
import {getAlbum, getNewAlbums} from "@/network/song/album-list";
import {useRouter} from "vue-router";
import {calString, calInteger} from "@/util/cal";
import {useStore} from "vuex";

export default {
    // 新碟上架
    name: "NewAlbums",
    setup() {
        const TAG = "NewAlbums.vue";
        const router = useRouter();
        const store = useStore();
        const allAlbumsTag = {
        '全部': 'all',
        '华语': 'zh',
        '欧美': 'ea',
        '韩国': 'kr',
        '日本': 'jp',
        }
        
        const newAlbumsInfo = reactive({
            hotAlbumsArr: [],
            newAlbumsArr: [],
            currentArea: 'all',
            page: 1,
            pageCount: 1,
            pageMaxLimit: 30
        })
        // 显示加载遮罩
        const beLoading = () => {
            store.commit('setLoading', true);
        }
        const init = () => {
            getAlbum(10, 0).then(res => {
                newAlbumsInfo.hotAlbumsArr = res.data.weekData.slice(0, 12);
            })
            getNewAlbums().then(res => {
                newAlbumsInfo.newAlbumsArr = res.data.albums;
                newAlbumsInfo.pageCount = calInteger(res.data.total / newAlbumsInfo.pageMaxLimit);
            })
            beLoading();
        }
        
        const refreshNewAlbumsData = (area, offset, page) => {
            newAlbumsInfo.page = page;
            newAlbumsInfo.currentCategory = area;
            getNewAlbums(area, offset).then(res => {
                newAlbumsInfo.newAlbumsArr = res.data.albums;
                newAlbumsInfo.pageCount = calInteger(res.data.total / newAlbumsInfo.pageMaxLimit);
            })
            beLoading();
        }
        const OnPageUpdate = (page) => {
            newAlbumsInfo.page = page;
            refreshNewAlbumsData(newAlbumsInfo.currentArea, (page - 1) * newAlbumsInfo.pageMaxLimit, page);
        }
        onBeforeMount(() => {
            init();
        })
        
        // 通知组件
        const notification = useNotification();
        const getRouterToAlbumList = (id) => {
            if (id === 0) {
                notification['error']({
                    content: '获取到的用户id错误',
                    meta: '切勿重复点击'
                })
                return;
            } else {
                router.push({path: '/album', query: {id}});
            }
        }
        return {
            ...toRefs(newAlbumsInfo),
            calString,
            getRouterToAlbumList,
            allAlbumsTag,
            refreshNewAlbumsData,
            OnPageUpdate
        }
    },
    components: {
        NImage,
        NPagination
    }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/base.scss';

.new-a-box {
    width: $client-width;
    background: #f4f4f4;
    
    min-height: $client-height;
    
    .album-b-t {
        @apply flex;
        border-bottom: 2px solid #c20c0c;
    }
}
</style>